<template>
    <div class="all-coupons">
        <div 
            v-for="(item,index) in list" :key="index"
            class="coupon-item"
            :class="{checked: (active === index && item.enable ==='1'), disabled:item.enable === '0'}"
            @click="couponHandle(item,index)"
        >
            <img src="../../../assets/coupon.png" alt="">

            <div class="money">

                <!-- 抵扣卷 -->
                <div class="deduction" v-show="item.coupontype === '1'">
                    <div class="content">
                        <span class="icno">￥</span>
                        <div class="number">
                            {{ item.value }}
                        </div>
                    </div>

                    <div>满{{item.minimum}}使用</div>
                </div>

                <!-- 折扣卷 -->
                <div class="discount" v-show="item.coupontype === '2'">
                    <div class="content">
                        <div class="number">
                            {{ item.value }}
                        </div>
                        <span class="icno">折</span>
                    </div>

                    <div>满{{item.minimum}}使用</div>
                </div>
            </div>

            <div class="date">
                {{ item.starttime + ' - ' + item.endtime }}
            </div>

            <div class="code">
                优惠码:{{ item.couponcode }}
            </div>

            <div class="cause" v-show="item.enable !== '1'">
                {{ item.cause }}
            </div>

        </div>
    </div>

</template>
<script>

export default {
    props: {
        list:{
            type:Array,
            default:function(){
                return []
            },
        },
        ids:{
            type:Number,
            default:0
        },

    },
    data() {
        return {
            active:''
        }
    },
    watch:{

    },
    methods:{
        couponHandle(val,index){
            
            if(val.enable === '1'){
                // this.$emit('setCoupon',val,this.ids)
                if(this.active === index){    
                    //如果已经选中  在此点击取消选中
                    this.active = "";
                    let sendObj={
                        type:'cancel',
                        ...val
                    }
                    this.$emit('setCoupon',sendObj)
                }else{
                    this.active = index;
                    let sendObj={
                        type:'checked',
                        ...val
                    }
                    this.$emit('setCoupon',sendObj)
                }
            }else{

            }
        }


    },
    mounted(){

    }
}
</script>
<style lang="less" scoped>
    @primary-color: #ee6e26;
    .all-coupons{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        .coupon-item {
            width: calc(50% - 5px) ;
            position: relative;
            margin-bottom: 10px;
            img{
                width: 100%;
                height: 61px;
            }
    
            .money{
                position: absolute;
                top: 5px;
                left: 14px;
                width: calc(100% - 30px);

                .deduction,.discount{
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .number{
                        display: inline-block;
                        font-size: 21px;
                        color: @primary-color;
                    }
                    .icno{
                        color: @primary-color;
                    }
                }
            }
    
            .date{
                position: absolute;
                top: 40px;
                width: 100%;
                text-align: center;
            }

            .code , .cause{
                text-align: center;
            }
    
        }
        .coupon-item.disabled{
            filter: grayscale(100%);
        }

        .checked{
            position: relative; 
            overflow:visible;
        }

        .coupon-item.checked:after{
            content:'√'; 
            position:absolute; 
            display:block; 
            background-color: @primary-color; 
            opacity: 0.8;
            width: 2em; 
            height: 2em; 
            right:0; 
            top:0; 
            line-height:2em; 
            color:white; 
            text-align:center; 
            border-bottom-left-radius: 2em;
        }

    }





</style>